<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Contour</title>
    <script type="text/javascript" src="../../d3.js"></script>
    <script type="text/javascript" src="../../d3.geom.js"></script>
    <style type="text/css">
svg {
  border: solid 1px #aaa;
}
path {
  stroke: red;
  stroke-width: 2px;
  fill: none;
}
rect {
  fill: lightsteelblue;
  stroke: #eee;
  stroke-width: 2px;
}
rect.d1 {
  fill: steelblue;
}
rect.d2 {
  fill: darkblue;
}
    </style>
  </head>
  <body>
    <script type="text/javascript">

function grid0(x,y) {
  if (x < 0 || y < 0 || x >= dw || y >= dh) return 0;
  return data[y][x];
}
function grid1(x,y) {
  if (x < 0 || y < 0 || x >= dw || y >= dh) return 0;
  return data[y][x]==1;
}
function grid2(x,y) {
  if (x < 0 || y < 0 || x >= dw || y >= dh) return 0;
  return data[y][x]==2;
}
	
var data = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 2, 2, 2, 0, 0, 0, 0],
            [0, 0, 0, 2, 2, 2, 2, 0, 0, 0],
            [0, 0, 2, 2, 2, 2, 2, 2, 0, 0],
            [0, 0, 2, 2, 2, 2, 2, 2, 2, 0],
            [0, 0, 2, 1, 0, 0, 2, 2, 2, 0],
            [0, 0, 1, 1, 0, 0, 2, 2, 2, 0],
            [0, 0, 0, 0, 1, 1, 2, 2, 0, 0],
            [0, 0, 0, 0, 1, 2, 2, 2, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]],
    fn = [grid0, grid1, grid2],
    dw = data[0].length,
    dh = data.length;
    sz = 30,
    grid = grid0;

function translateY(d, i) { return "translate(0,"+(i*sz)+")"; }
function translateX(d, i) { return "translate("+(i*sz)+",0)"; }
function scale(p) { return [p[0]*sz, p[1]*sz]; }

var svg = d3.select("body")
 .append("svg")
  .attr("width", dw*sz)
  .attr("height", dh*sz);

var g = svg.selectAll("g")
  .data(data)
 .enter().append("g")
  .attr("transform", translateY);

g.selectAll("rect")
  .data(function(d) { return d; })
 .enter().append("rect")
  .attr("transform", translateX)
  .attr("width", sz)
  .attr("height", sz)
  .attr("class", function(d) { return "d"+d; })
  .on("mouseover", mouseover);

contour(grid);

function contour(grid, start) {
  svg.selectAll("path")
    .data([d3.geom.contour(grid, start).map(scale)])
    .attr("d", function(d) { return "M" + d.join("L") + "Z"; })
   .enter().append("path")
    .attr("d", function(d) { return "M" + d.join("L") + "Z"; });
}

function mouseover(d,i) {
  var s = undefined;
  grid = fn[d];
  if (d > 0) {
	// map mouse to grid coords, then find left edge
    var p = d3.svg.mouse(svg[0][0]);
    s = [Math.floor(p[0]/sz), Math.floor(p[1]/sz)];
    while (grid(s[0]-1,s[1])) s[0]--;
  }
  contour(grid, s);
}
    </script>
  </body>
</html>
